<template>
	<view class="treatment-queue">
		<view class="queue-card" v-for="(queueInfo , index) in inspectionQueueInfo" :key="index">
			<view class="queue-header">
				<view class="title-container">
					<view class="queue-dept">{{ queueInfo.department }}</view>
					<view class="title-bg"></view>
				</view>
				<view class="queue-status delayed" v-if="isdelay">已过号</view>
				<view class="queue-status" v-else>候诊中</view>
			</view>
			<view class="queue-wait-box">
				<view class="wait-label">前面等待人数</view>
				<view :class="isdelay? 'wait-num delayed' : 'wait-num'">{{ getWaitNumDisplay(queueInfo) }}</view>
				<view class="update-time">更新时间：{{ queueInfo.updateTime }}</view>
			</view>
			<view class="queue-num-row">
				<view class="num-block">
					<view class="num-label">当前叫号</view>
					<view class="num-value">{{ queueInfo.currentNum }}</view>
				</view>
				<view class="num-block">
					<view class="num-label">我的取药号</view>
					<view class="num-value">{{ queueInfo.myNum }}</view>
				</view>
			</view>
			<view class="queue-divider"></view>
			<view class="queue-row">
				<view class="label">检验项目 ：</view>
				<view class="value">{{ queueInfo.project }}</view>
			</view>
			<view class="queue-row">
				<view class="label">检查院区 ：</view>
				<view class="value">{{ queueInfo.hospital }}</view>
			</view>
			<view class="queue-row">
				<view class="label">检查位置 ：</view>
				<view class="value start-center">
					<view>{{ queueInfo.location }}</view>
					<image class="guidance-map-icon" src="/static/images/imgs/guidance-map-icon.png"></image>
				</view>
			</view>
			<view class="queue-row">
				<view class="label">检查室 ：</view>
				<view class="value vital">{{ queueInfo.room }}</view>
			</view>
			<view class="queue-row">
				<view class="label">预约时间 ：</view>
				<view class="value vital">{{ queueInfo.time }}</view>
			</view>
			<view class="queue-divider"></view>
			<ButtonAllVue btnL="延迟排队" btnR="刷新排队进度"></ButtonAllVue>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			inspectionQueueInfo: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				isdelay: false
			}
		},
		methods: {
			getWaitNumDisplay(queueInfo) {
				const currentNum = parseInt(queueInfo.currentNum);
				const myNum = parseInt(queueInfo.myNum);

				if (currentNum > myNum + 2) {
					this.isdelay = true
					return '已过号';
				} else if (currentNum <= myNum) {
					this.isdelay = false
					return (myNum - currentNum).toString();
				} else {
					this.isdelay = false
					return '0';
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.queue-card {
		background: #fff;
		border-radius: 16rpx;
		// margin: 25rpx 0 0 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 24rpx 32rpx 18rpx 32rpx;
	}

	.queue-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}

	.title-container {
		position: relative;
	}

	.queue-dept {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: 0;
		left: calc(30%);
		z-index: 0
	}

	.queue-status {
		background: #4ad49a;
		color: #fff;
		font-size: 24rpx;
		border-radius: 8rpx;
		padding: 4rpx 18rpx;
		right: 8rpx;
	}

	.queue-status.delay {
		background: #d44a4a;
	}

	.queue-wait-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx 0 10rpx 0;
	}

	.wait-label {
		color: #666;
		font-size: 26rpx;
		background: #bce4ec;
		border-radius: 26rpx;
		padding: 10rpx 28rpx;
	}

	.wait-num {
		color: #1ec6e6;
		font-size: 60rpx;
		font-weight: bold;
		margin: 10rpx 0 6rpx 0;
	}

	.wait-num.delayed {
		color: #d44a4a;
	}

	.update-time {
		color: #aaa;
		font-size: 26rpx;
	}

	.queue-num-row {
		display: flex;
		justify-content: space-between;
		margin: 18rpx 0 0 0;
	}

	.num-block {
		flex: 1;
		text-align: center;
	}

	.num-label {
		color: #888;
		font-size: 26rpx;
	}

	.num-value {
		color: #333;
		font-size: 38rpx;
		font-weight: bold;
		margin-top: 6rpx;
	}

	.queue-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 18rpx 0 18rpx 0;
		width: 100%;
	}

	.queue-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
		width: 160rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.value.vital {
		color: #ca3333;
		font-size: 28rpx;
		flex: 1;
	}

	.nav-btn {
		background: #e0f3ff;
		color: #1ec6e6;
		font-size: 22rpx;
		border-radius: 24rpx;
		padding: 0 18rpx;
		height: 40rpx;
		line-height: 40rpx;
		border: none;
		margin-left: 12rpx;
	}

	.queue-btn-row {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 15rpx;
	}

	.delay-btn {
		width: 48%;
		height: 64rpx;
		background: #fff;
		color: #1ec6e6;
		font-size: 28rpx;
		border-radius: 44rpx;
		border: 1rpx solid #1ec6e6;
		text-align: center;
		line-height: 64rpx;
	}

	.refresh-btn {
		width: 48%;
		height: 64rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 64rpx;
		border: none;
	}

	.guidance-map-icon {
		width: 18px;
		height: 18px;
		margin: 5px;
	}
</style>